<template>
  <div class="todo">
    <div class="content">
      <div class="add">
        <input type="text" v-model="todoValue" placeholder="请添加你要计划的内容" name="" @keyup.enter="addEvent">
      </div>
      <div class="todolist">
        <ul>
          <li v-for="(item,index) in todolist" @click="todoclick(index)">
            {{item.event}}
            <input type="radio" name="todo">
          </li>

        </ul>
      </div>
      <div class="tips">您已完成<span class="red">{{donelist}}</span>事情，还有<span class="red">{{nodolist}}</span>件事情未完成</div>
    </div>
    <hr>
    <div class="schedule">
      <div class="schevent" v-for="(item,index) in schedulelist" @click="addSch(index)">
          <div class="title"><h3>{{item.title}}</h3></div>
          <p>{{item.schtime}}</p>
          <p>{{item.schplace}}</p>
          <p>{{item.schmatter}}</p>
      </div>
    </div>
    <addschview :schViewId="schId" v-if="addschviewShow" v-on:receivedata="receivechildData" :on-schshow="onSchShow"></addschview>
  </div>
</template>
<script type="text/javascript">
import addschview from '../subcom/addschview.vue'
  export default{
    data(){
      return {
        todolist: [
          {event: '洗脸',state:false},
          {event: '刷牙',state:false},
          {event: '早操',state:false},
          {event: '自习',state:false}
        ],
        todoValue: '',
        schedulelist: [
          {id: 0, title: '周一'},
          {id: 1, title: '周二'},
          {id: 2, title: '周三'},
          {id: 3, title: '周四'},
          {id: 4, title: '周五'},
          {id: 5, title: '周六'},
        ],
        addschviewShow: false,
        schId : 0,
      }
    },
    methods: {
      addEvent(){
        let doneArr,nodoArr;
        this.todolist.push({event:this.todoValue,state:false});
        this.todoValue = '';
      },
      todoclick(index){
        this.todolist[index].state = !this.todolist[index].state;
      },
      addSch(index){
        this.addschviewShow = true;
        this.schId = index;
      },
      onSchShow(done){
        this.addschviewShow = false;
      },
      receivechildData(addEvData){
        // this.childData = addEvData;
        var _this = this;
        this.schedulelist[addEvData.id] = Object.assign(_this.schedulelist[addEvData.id],addEvData)

      }
    },
    computed: {
      donelist(){
        let dolist = [];
        for(let key in this.todolist){
          if(this.todolist[key].state && dolist.indexOf(this.todolist[key]) == -1){
            dolist.push(this.todolist[key])
          }
        }
        for(let key in dolist){
          if(!dolist[key].state){
            dolist.splice(key-1,1)
          }
        }
        return  dolist.length;
      },

      nodolist(){
        let nolist = [];
        for(let key in this.todolist){
          if(!this.todolist[key].state && nolist.indexOf(this.todolist[key]) == -1){
            nolist.push(this.todolist[key])
          }
        }
        // console.log('-------------------------')
        for(let key in nolist){
          if(nolist[key].state){
            nolist.splice(key-1,1)
          }
        }
        return nolist.length;
      },

    },
    components: {
      addschview
    }

  }
</script>
<style lang="sass">
  *{
    margin: 0;
    padding: 0;
  }
  .todo{
    width: 100%;
    height: 100%;
  }
  input,body{
    font-size: 14px;
  }
  li{
    list-style: none;
  }
  .todolist {
    li{
      border-bottom: 1px solid #ddd;
      margin-bottom: 4px;
      margin: 3px 10px;
    }

  }
  .tips{
    margin: 10px 0 0 10px;;
    .red{
     color: red;
    }
  }
  .schedule .schevent{
    display: inline-block;
    width: 33%;
    height: 150px;
    border: 1px solid #ddd;

    .title{
      text-align: center;
    }
  }

</style>